<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>爱家-我的订单</title>
    <link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/reset.css" rel="stylesheet">
    <link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="/static/css/ihome/main.css" rel="stylesheet">
    <link href="/static/css/ihome/orders.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/vue-2.5.16.js"></script>
</head>
<body>
    <div class="container">
        <div class="top-bar">
            <div class="nav-bar">
                <h3 class="page-title">我的订单</h3>
                <a class="nav-btn fl" href="/my.html"><span><i class="fa fa-angle-left fa-2x"></i></span></a>
            </div>
        </div>
        <div class="orders-con">
            <ul class="orders-list">
            </ul>
            <script id="orders-list-tmpl" type="text/html">
                {{if orders}}
                {{each orders as order}}
                <li order-id={{order.order_id}}>
                    <div class="order-title">
                        <h3>订单编号：{{order.order_id}}</h3>
                        {{ if 3 == order.status }}
                        <div class="fr order-operate">
                            <button type="button" class="btn btn-success order-comment" data-toggle="modal" data-target="#comment-modal">发表评价</button>
                        </div>
                        {{/if}}
                        {{ if 1 == order.status }}
                        <div class="fr order-operate_payment">
                            <button type="button" onclick="payment()" class="btn btn-success order-payment" data-toggle="modal_pay" >未支付</button>
                        </div>
                        {{/if}}
                    </div>
                    <div class="order-content">
                        <img src="{{order.img_url}}">
                        <div class="order-text">
                            <h3>{{order.title}}</h3>
                            <ul>
                                <li>创建时间：{{order.ctime}}</li>
                                <li>入住日期：{{order.start_date}}</li>
                                <li>离开日期：{{order.end_date}}</li>
                                <li>合计金额：￥{{(order.amount/100.0).toFixed(0)}}(共{{order.days}}晚)</li>
                                <li>订单状态：
                                    <span>
                                        {{if 0 == order.status}}
                                            待接单
                                        {{else if 3 == order.status}}
                                            待评价
                                        {{else if 4 == order.status}}
                                            已完成
                                        {{else if 6 == order.status}}
                                            已拒单
                                        {{/if}}
                                    </span>
                                </li>
                                {{if 4 == order.status}}
                                <li>我的评价： {{order.comment}}</li>
                                {{else if 6 == order.status}}
                                <li>拒单原因： {{order.comment}}</li>
                                {{/if}}
                            </ul>
                        </div>
                    </div>
                </li>
                {{/each}}
                {{else}}
                暂时没有订单。
                {{/if}}
            </script>
            <div class="modal fade" id="comment-modal" tabindex="-1" role="dialog" aria-labelledby="comment-label">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">发表评价</h4>
                        </div>
                        <div class="modal-body">
                            <textarea class="form-control" rows="3" id="comment" placeholder="请在此处填写评价"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary modal-comment" order-id="">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <p><span><i class="fa fa-copyright"></i></span>爱家租房&nbsp;&nbsp;享受家的温馨</p>
        </div> 
    </div>
    
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="/static/js/template.js"></script>
    <script src="/static/js/ihome/host.js"></script>
    <script src="/static/js/ihome/orders.js"></script>
    <script src="/static/js/vue-2.5.16.js"></script>

</body>
 <script type="text/javascript">
        var vm = new Vue({
            // el: '#app',
            // data: {
            //     host,
            //     trade_id: '',
            //     username: sessionStorage.username || localStorage.username,
            //     token: sessionStorage.token || localStorage.token,
            // },
            mounted: function(){
                axios.put(this.host+'/payment/callback/'+document.location.search,{}, {
                        responseType: 'json',
                        withCredentials:true
                    })
                    .then(response => {
                        alert('111')
                        // this.trade_id = response.data.trade_id;
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            // methods: {
            //     // 退出
            //     logout: function(){
            //         sessionStorage.clear();
            //         localStorage.clear();
            //         location.href = '/login.html';
            //     }
            // }
        })
    </script>
</html>